<template>
  <view class="cell-box">
    <view class="left">
      <image class="iconwh" :src="cellInfo.iconUrl" mode="aspectFit" />
      <text class="m-l-10">{{ cellInfo.label }}</text>
    </view>
    <view class="right">
      <image class="iconwh" src="/static/icons/to_right.png" mode="aspectFit" />
    </view>
  </view>
</template>

<script setup lang="ts">
interface RadioItem {
  isIcons: boolean
  iconUrl: string
  label: string
}

// 定义组件 props 并设置默认值
const props = withDefaults(
  defineProps<{
    cellInfo: RadioItem
  }>(),
  {
    cellInfo: () => ({
      isIcons: true, // 默认显示图标
      iconUrl: '/static/icons/settings_icon.png', // 默认图标路径
      label: '默认文案' // 默认文本
    })
  }
)
</script>

<style scoped lang="scss">
.cell-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: $color-primary-light-2;
  border-radius: 8px;
  cursor: pointer;
  .iconwh {
    width: 48rpx;
    height: 48rpx;
  }
  .left {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
